<template>
    <div id="com-container">
        <div
            :id="$route.path === '/index' ? 'left-top-container-index' : 'left-top-container'"
            ref="box"
        ></div>
    </div>
</template>

<script>
import { AreaTop } from '../request/api';
import { mapGetters } from 'vuex';
export default {
    data() {
        return {
            myChart: null
        };
    },
    computed: {
        ...mapGetters({
            theme: 'theme'
        })
    },
    watch: {
        theme() {
            this.myChart.off('dblclick')
            this.myChart.dispose()
            this.initCharts()
            this.getData()
            this.changeCharts()
            this.dblClick()
        }
    },
    mounted() {
        this.initCharts()
        this.getData()
        window.addEventListener('resize', () => {
            this.changeCharts()
        })
        this.changeCharts()
        this.dblClick()
    },

    methods: {
        dblClick() {
            this.myChart.getZr().on('dblclick', () => {
                if (this.$route.path === '/index') {
                    this.$router.push('/lefttop')
                } else {
                    this.$router.push('/index')
                }
            });
        },
        // 1、初始化图表
        initCharts() {
            this.myChart = this.$echarts.init(this.$refs.box, this.theme)
            let option = {
                title: {
                    text: '各地区种植面积统计TOP10',
                    top: '10px',
                    left: '20px'
                },
                tooltip: {
                },
                grid: {
                    //距离边框大小
                    left: '20px',
                    right: '30px',
                    bottom: '30px',
                    //是否显示刻度标签
                    containLabel: true
                },
                yAxis: {
                    type: 'category',
                },
                xAxis: {
                    type: 'value',
                    axisLine: {
                        show: true // 坐标轴轴线
                    },
                },
                series: [
                    {
                        name: '销量',
                        type: 'bar',
                        itemStyle: {
                            color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                { offset: 0, color: '#103458' },
                                { offset: 1, color: '#37c0e6' },
                            ])
                        },
                        label: {
                            show: true,
                            position: 'right',
                            color: this.theme === 'dark' ? '#fff' : '#333'
                        }
                    }
                ]
            }
            this.myChart.setOption(option);
        },
        // 2、数据请求处理
        async getData() {
            let res = await AreaTop()
            res.sort((a, b) => a.area - b.area)
            let name = res.map(item => item.name)
            let area = res.map(item => item.area)
            this.setCharts(name, area)
        },
        // 3、更新图表
        setCharts(name, area) {
            let option = {
                yAxis: {
                    type: 'category',
                    data: name
                },
                series: [
                    {
                        data: area,
                        type: 'bar',
                    }
                ]
            }
            this.myChart.setOption(option);
        },
        // 4、图表适配
        changeCharts() {
            let width = this.$refs.box.offsetWidth / 100
            let fontSize = this.$route.path === '/index' ? width * 5 : width * 2
            this.myChart.resize()
            let option = {
                title: {
                    textStyle: {
                        fontSize
                    }
                }
            }
            this.myChart.setOption(option);
        }
    },
};
</script>

<style scoped>
#left-top-container-index {
    width: 90%;
    height: 90%;
    margin: auto;
    border: 1px solid #38c5ec;
}
#left-top-container {
    width: 100%;
    height: 100%;
}
</style>
